import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_html_view/flutter_html_view.dart';

import 'package:toast/toast.dart';
import 'package:vmall_app/assets/icon_font.dart';
import 'package:vmall_app/models/goods.dart';
import 'package:vmall_app/pages/detail/choice_goods.dart';
import 'package:vmall_app/pages/detail/goods_images.dart';
import 'package:vmall_app/pages/detail/guarantee.dart';
import 'package:vmall_app/widgets/custome_bottom_sheet.dart';
import 'package:vmall_app/widgets/scroll_tab_header.dart';

class GoodsDetail extends StatefulWidget {
  final int goodsId;

  const GoodsDetail({Key key, this.goodsId}) : super(key: key);

  @override
  _GoodsDetailState createState() => _GoodsDetailState();
}

class _GoodsDetailState extends State<GoodsDetail>
    with TickerProviderStateMixin {
  AnimationController controller;
  ScrollController scrollController;
  Animation animation;
  double initialValue = 0;
  double headerOpacity = 0;
  bool isSelected = true;

  ///商品描述
  GlobalKey goodsDescriptionKey = GlobalKey();

  ///商品推荐
  GlobalKey goodsEvaluateKey = GlobalKey();

  ///商品详情
  GlobalKey goodsDetailKey = GlobalKey();

  ///商品推荐
  GlobalKey goodsRecommendKey = GlobalKey();

  GlobalKey safeAreaKey = GlobalKey();

  OverlayEntry overlayEntry;
  @override
  void initState() {
    controller =
        AnimationController(vsync: this, duration: Duration(microseconds: 300));
    animation = Tween(begin: 0, end: 0.5).animate(controller);
    controller.addListener(() {
      setState(() {
        initialValue = animation.value; //controller.value;
      });
    });
    scrollController = ScrollController();

    scrollController.addListener(() {});
    super.initState();
  }

  Widget actionIcon(IconData iconData, {double size = 20}) {
    return Padding(
        padding: const EdgeInsets.all(15.0),
        child: Container(
            height: 25,
            width: 25,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.black26,
            ),
            child: Center(
              child: Icon(
                iconData,
                color: Colors.white,
                size: size,
              ),
            )));
  }

  Widget headerIcon(IconData iconData,
      {Size size = const Size(25.0, 25.0),
      double iconSize = 15,
      double leadSpace = 0,
      int count = 0}) {
    return Row(
      children: <Widget>[
        SizedBox(
          width: leadSpace,
        ),
        Container(
            width: size.width,
            height: size.height,
            decoration: BoxDecoration(
                color: Colors.black26, borderRadius: BorderRadius.circular(20)),
            child: Icon(
              iconData,
              size: 15,
              color: Colors.white,
            ))
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      key: safeAreaKey,
      child: Material(
        child: Scaffold(
          body: Stack(alignment: AlignmentDirectional.topStart, children: [
            NotificationListener(
              onNotification: (ScrollNotification notification) {
                if (notification is ScrollUpdateNotification) {
                  setState(() {
                    if (notification.metrics.pixels / 400.0 >= 1) {
                      headerOpacity = 1;
                    } else {
                      headerOpacity = (notification.metrics.pixels / 400.0);
                      if (headerOpacity < 0.001) {
                        headerOpacity = 0;
                      }
                    }
                  });
                }
                return true;
              },
              child: CustomScrollView(
                controller: scrollController,
                physics: BouncingScrollPhysics(),
                slivers: <Widget>[
                  SliverToBoxAdapter(
                    child: Container(
                      key: goodsDescriptionKey,
                    ),
                  ),
                  GoodsImages(goodsId: widget.goodsId),
                  SliverList(
                    delegate: SliverChildListDelegate(<Widget>[
                      Container(
                        color: Colors.grey[100],
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              color: Colors.white,
                              padding: const EdgeInsets.all(10),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    '新品促销',
                                    style: TextStyle(
                                        color: Colors.red, fontSize: 10),
                                  ),
                                  SizedBox(height: 10),
                                  Row(
                                    children: <Widget>[
                                      RichText(
                                        text: TextSpan(children: [
                                          TextSpan(
                                              text: "¥",
                                              style: TextStyle(
                                                  color: Colors.red,
                                                  fontSize: 10)),
                                          TextSpan(
                                            text: '88-236',
                                            style: TextStyle(
                                                color: Colors.red,
                                                fontSize: 21,
                                                fontWeight: FontWeight.w400),
                                          )
                                        ]),
                                      ),
                                      SizedBox(
                                        width: 5,
                                      ),
                                      Container(
                                          padding: const EdgeInsets.all(3),
                                          decoration: BoxDecoration(
                                              color: Colors.red,
                                              borderRadius:
                                                  BorderRadius.circular(10)),
                                          child: RichText(
                                            text: TextSpan(children: [
                                              TextSpan(
                                                text: '券后¥',
                                                style: TextStyle(
                                                    color: Colors.white,
                                                    fontSize: 10,
                                                    letterSpacing: 2),
                                              ),
                                              TextSpan(
                                                text: '78',
                                                style: TextStyle(
                                                    color: Colors.white,
                                                    fontSize: 12,
                                                    letterSpacing: 1),
                                              ),
                                              TextSpan(
                                                text: '起',
                                                style: TextStyle(
                                                    color: Colors.white,
                                                    fontSize: 10,
                                                    letterSpacing: 2),
                                              )
                                            ]),
                                          ))
                                    ],
                                  ),
                                  SizedBox(
                                    height: 10,
                                  ),
                                  Row(
                                    children: <Widget>[
                                      Container(
                                        padding: const EdgeInsets.all(2),
                                        decoration: BoxDecoration(
                                            color: Colors.red[100],
                                            borderRadius:
                                                BorderRadius.circular(3)),
                                        child: Text(
                                          '店铺券满128减20',
                                          style: TextStyle(
                                              fontSize: 10,
                                              color: Colors.redAccent),
                                        ),
                                      ),
                                      SizedBox(
                                        width: 10,
                                      ),
                                      Container(
                                          padding: const EdgeInsets.all(2),
                                          decoration: BoxDecoration(
                                              color: Colors.red[100],
                                              borderRadius:
                                                  BorderRadius.circular(3)),
                                          child: Text(
                                            '购买得积分',
                                            style: TextStyle(
                                                fontSize: 10,
                                                color: Colors.redAccent),
                                          )),
                                      Expanded(
                                        child: Container(),
                                      ),
                                      InkWell(
                                        onTap: () {
                                          controller.forward();
                                        },
                                        child: Text(
                                          '领券 >',
                                          style: TextStyle(
                                              fontSize: 10,
                                              color: Colors.redAccent),
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              color: Colors.white,
                              padding: const EdgeInsets.only(left: 10),
                              child: Row(
                                children: <Widget>[
                                  Expanded(
                                    child: RichText(
                                      text: TextSpan(children: [
                                        WidgetSpan(
                                            child: Container(
                                          padding: const EdgeInsets.only(
                                              left: 5,
                                              right: 5,
                                              top: 2,
                                              bottom: 2),
                                          decoration: BoxDecoration(
                                              color: Colors.red,
                                              borderRadius:
                                                  BorderRadius.circular(10)),
                                          child: Text(
                                            '天猫',
                                            style: TextStyle(fontSize: 12),
                                          ),
                                        )),
                                        WidgetSpan(
                                            child: SizedBox(
                                          width: 4,
                                        )),
                                        TextSpan(
                                            text:
                                                '背包男双肩包新款男士商务大容量皮质内衬白短途出差履行防盗15.6寸电脑背包',
                                            style:
                                                TextStyle(color: Colors.black))
                                      ]),
                                    ),
                                  ),
                                  GestureDetector(
                                    onTap: () {},
                                    child: Container(
                                      padding: const EdgeInsets.all(4),
                                      decoration: BoxDecoration(
                                          color: Colors.white,
                                          borderRadius: BorderRadius.only(
                                              bottomLeft: Radius.circular(10),
                                              topLeft: Radius.circular(10))),
                                      width: 50,
                                      child: Row(
                                        children: <Widget>[
                                          Icon(
                                            Icons.share,
                                            size: 12,
                                            color: Colors.grey,
                                          ),
                                          Text(
                                            '分享',
                                            style: TextStyle(
                                                color: Colors.grey,
                                                fontSize: 12),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              color: Colors.white,
                              padding: const EdgeInsets.all(5),
                              child: Column(
                                children: <Widget>[
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceAround,
                                    children: <Widget>[
                                      Row(
                                        children: <Widget>[
                                          Icon(
                                            Icons.star,
                                            size: 15,
                                            color: Colors.grey,
                                          ),
                                          Text(
                                            "546人推荐",
                                            style: TextStyle(
                                                fontSize: 10,
                                                color: Colors.grey),
                                          )
                                        ],
                                      ),
                                      Row(
                                        children: <Widget>[
                                          Icon(Icons.card_giftcard,
                                              size: 15, color: Colors.grey),
                                          Text(
                                            '送给TA',
                                            style: TextStyle(
                                                fontSize: 10,
                                                color: Colors.grey),
                                          )
                                        ],
                                      ),
                                      Row(
                                        children: <Widget>[
                                          Icon(Icons.person,
                                              size: 15, color: Colors.grey),
                                          Text(
                                            "帮我选",
                                            style: TextStyle(
                                                fontSize: 10,
                                                color: Colors.grey),
                                          )
                                        ],
                                      )
                                    ],
                                  ),
                                  Container(
                                      margin: const EdgeInsets.symmetric(
                                          horizontal: 10),
                                      padding: const EdgeInsets.only(
                                          left: 20,
                                          top: 2,
                                          right: 2,
                                          bottom: 2),
                                      width: MediaQuery.of(context).size.width,
                                      decoration: BoxDecoration(
                                          color: Colors.grey[100],
                                          borderRadius:
                                              BorderRadius.circular(5)),
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: <Widget>[
                                          Text(
                                            '洋掏大选已入围 推荐TA上大赏',
                                            style: TextStyle(
                                                color: Colors.grey,
                                                fontSize: 12),
                                          ),
                                          InkWell(
                                            onTap: () {
                                              showModalBottomSheet(
                                                  builder: (context) {
                                                    return Container(
                                                      height: 300,
                                                      color: Colors.red,
                                                      child: Text('活动说明001'),
                                                    );
                                                  },
                                                  context: context);
                                            },
                                            child: Icon(
                                              Icons.help_outline,
                                              size: 15,
                                              color: Colors.grey,
                                            ),
                                          )
                                        ],
                                      )),
                                ],
                              ),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 10),
                              color: Colors.white,
                              padding: const EdgeInsets.all(10),
                              child: Column(
                                children: <Widget>[
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: <Widget>[
                                      Text(
                                        "发货",
                                        style: TextStyle(
                                            color: Colors.grey, fontSize: 12),
                                      ),
                                      SizedBox(
                                        width: 10,
                                      ),
                                      Row(
                                        children: <Widget>[
                                          Icon(Icons.location_on,
                                              size: 15, color: Colors.grey),
                                          Text(
                                            '广东广州',
                                            style: TextStyle(
                                                color: Colors.grey,
                                                fontSize: 12),
                                          ),
                                          Padding(
                                            padding: const EdgeInsets.symmetric(
                                                horizontal: 10, vertical: 5),
                                            child: DecoratedBox(
                                                child: Container(
                                                  height: 10,
                                                ),
                                                decoration: BoxDecoration(
                                                    border: Border(
                                                        left: BorderSide(
                                                            color: Colors
                                                                .grey[300])))),
                                          ),
                                          Text(
                                            '快递：',
                                            style: TextStyle(
                                                color: Colors.grey,
                                                fontSize: 12),
                                          ),
                                          Text(
                                            '0.00',
                                            style: TextStyle(
                                                color: Colors.grey,
                                                fontSize: 12),
                                          )
                                        ],
                                      ),
                                      Expanded(
                                        child: Container(),
                                      ),
                                      Row(
                                        children: <Widget>[
                                          Text(
                                            '月销量',
                                            style: TextStyle(
                                                color: Colors.grey,
                                                fontSize: 12),
                                          ),
                                          Text(
                                            '30891',
                                            style: TextStyle(
                                                color: Colors.grey,
                                                fontSize: 12),
                                          )
                                        ],
                                      )
                                    ],
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(top: 8.0),
                                    child: Row(
                                      children: <Widget>[
                                        Text(
                                          '活动',
                                          style: TextStyle(
                                              color: Colors.grey, fontSize: 12),
                                        ),
                                        SizedBox(
                                          width: 10,
                                        ),
                                        Icon(Icons.card_giftcard,
                                            size: 15, color: Colors.grey),
                                        Text(
                                          '去天猫APP',
                                          style: TextStyle(
                                              color: Colors.red, fontSize: 10),
                                        ),
                                        SizedBox(
                                          width: 10,
                                        ),
                                        Text(
                                          '下单送私房红包最高99元',
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 12),
                                        ),
                                        Expanded(
                                          child: Container(),
                                        ),
                                        Icon(Icons.keyboard_arrow_right,
                                            size: 15, color: Colors.grey)
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            ),
                            InkWell(
                              onTap: () {
                                showModalBottomSheet(
                                    elevation: 5,
                                    backgroundColor: Colors.transparent,
                                    context: context,
                                    builder: (context) {
                                      return Guarantee(
                                        goodsId: this.widget.goodsId,
                                      );
                                    });
                              },
                              child: Container(
                                margin: const EdgeInsets.only(top: 10),
                                padding: const EdgeInsets.all(10),
                                decoration: BoxDecoration(color: Colors.white),
                                child: Row(
                                  children: <Widget>[
                                    Text(
                                      '保障',
                                      style: TextStyle(
                                          color: Colors.grey, fontSize: 12),
                                    ),
                                    SizedBox(
                                      width: 10,
                                    ),
                                    Expanded(
                                      flex: 1,
                                      child: RichText(
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                        text: TextSpan(
                                            text: getGoodsById(
                                                    this.widget.goodsId)
                                                .getGuaranteeItemTitle()
                                                .join(' · '),
                                            style: TextStyle(
                                                fontSize: 12,
                                                color: Colors.black,
                                                fontWeight: FontWeight.w100)),
                                      ),
                                    ),
                                    Icon(
                                      Icons.keyboard_arrow_right,
                                      color: Colors.grey,
                                      size: 15,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            GestureDetector(
                              onTap: () {
                                print('0000000');
                                CustomeBottomSheet(context, (context, close) {
                                  return ChoiceGoods(
                                    goodsId: this.widget.goodsId,
                                    close: close,
                                    size: Size(
                                        MediaQuery.of(context).size.width,
                                        MediaQuery.of(context).size.height *
                                            0.8),
                                  );
                                }, this, viewPortHeightRate: 0.8)
                                    .show();
                              },
                              child: Container(
                                decoration: BoxDecoration(color: Colors.white),
                                margin: const EdgeInsets.only(top: 10),
                                padding: const EdgeInsets.all(10),
                                child: Row(
                                  children: <Widget>[
                                    Text('选择',
                                        style: TextStyle(
                                            color: Colors.grey, fontSize: 12)),
                                    SizedBox(
                                      width: 10,
                                    ),
                                    Text(
                                      '已选:"黑色"',
                                      style: TextStyle(fontSize: 12),
                                    ),
                                    Expanded(
                                      child: Container(),
                                    ),
                                    Icon(
                                      Icons.keyboard_arrow_right,
                                      size: 15,
                                      color: Colors.grey,
                                    )
                                  ],
                                ),
                              ),
                            ),
                            Container(
                              decoration: BoxDecoration(color: Colors.white),
                              margin: const EdgeInsets.only(top: 10),
                              padding: const EdgeInsets.all(10),
                              child: Row(
                                children: <Widget>[
                                  Text('参数',
                                      style: TextStyle(
                                          color: Colors.grey, fontSize: 12)),
                                  SizedBox(
                                    width: 10,
                                  ),
                                  Text('品牌',
                                      style: TextStyle(
                                          color: Colors.black, fontSize: 12)),
                                  SizedBox(
                                    width: 10,
                                  ),
                                  Text('质地...',
                                      style: TextStyle(
                                          color: Colors.black, fontSize: 12)),
                                  Expanded(
                                    child: Container(),
                                  ),
                                  Icon(
                                    Icons.keyboard_arrow_right,
                                    size: 15,
                                    color: Colors.grey,
                                  )
                                ],
                              ),
                            ),
                            Container(
                              key: goodsEvaluateKey,
                              padding: const EdgeInsets.all(5),
                              decoration: BoxDecoration(color: Colors.white),
                              margin: const EdgeInsets.only(top: 10),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: <Widget>[
                                  Padding(
                                    padding: const EdgeInsets.all(5),
                                    child: Row(
                                      children: <Widget>[
                                        Text(
                                          '宝贝评价(108)',
                                          style: TextStyle(
                                              fontWeight: FontWeight.w300,
                                              fontSize: 13),
                                        ),
                                        Expanded(
                                          child: Container(),
                                        ),
                                        InkWell(
                                          onTap: () {
                                            Toast.show('开发中...', context,
                                                duration: Toast.LENGTH_LONG);
                                          },
                                          child: Row(
                                            children: <Widget>[
                                              Text(
                                                '查看全部',
                                                style: TextStyle(
                                                    color: Colors.red,
                                                    fontSize: 12),
                                              ),
                                              Icon(
                                                Icons.keyboard_arrow_right,
                                                size: 15,
                                                color: Colors.red,
                                              )
                                            ],
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                  Align(
                                    alignment: Alignment.centerLeft,
                                    child: Wrap(
                                      crossAxisAlignment:
                                          WrapCrossAlignment.start,
                                      direction: Axis.horizontal,
                                      alignment: WrapAlignment.start,
                                      spacing: 0.8,
                                      children: <Widget>[
                                        Chip(
                                          label: Text('质量不错（52)',
                                              style: TextStyle(fontSize: 10)),
                                          backgroundColor: Colors.red[50],
                                        ),
                                        Chip(
                                          label: Text('服务态度差（123)',
                                              style: TextStyle(fontSize: 10)),
                                          backgroundColor: Colors.red[50],
                                        ),
                                        Chip(
                                          label: Text('与描述功能不符（987)',
                                              style: TextStyle(fontSize: 10)),
                                          backgroundColor: Colors.red[50],
                                        ),
                                      ],
                                    ),
                                  ),
                                  Container(
                                    child: Column(
                                      children: <Widget>[
                                        Row(
                                          children: <Widget>[
                                            Icon(Icons.supervised_user_circle),
                                            Text('t**5')
                                          ],
                                        ),
                                        RichText(
                                          maxLines: 2,
                                          overflow: TextOverflow.ellipsis,
                                          text: TextSpan(
                                              style: TextStyle(
                                                  color: Colors.black,
                                                  fontSize: 12),
                                              text:
                                                  "双肩包收到，质量很好，款式非常喜欢，内存弓箭很大，可以放许多东西背上效果很好，非常帅气！和图片一模一样"),
                                        )
                                      ],
                                    ),
                                  ),
                                  Divider(
                                    color: Colors.grey,
                                    indent: 10,
                                  ),
                                  Container(
                                    child: Column(
                                      children: <Widget>[
                                        Padding(
                                          padding: const EdgeInsets.all(5.0),
                                          child: Row(
                                            children: <Widget>[
                                              Text(
                                                '问大家(108)',
                                                style: TextStyle(
                                                    fontWeight: FontWeight.w300,
                                                    fontSize: 13),
                                              ),
                                              Expanded(
                                                child: Container(),
                                              ),
                                              InkWell(
                                                onTap: () {
                                                  Toast.show('开发中...', context,
                                                      duration:
                                                          Toast.LENGTH_LONG);
                                                },
                                                child: Row(
                                                  children: <Widget>[
                                                    Text(
                                                      '查看全部',
                                                      style: TextStyle(
                                                          color: Colors.red,
                                                          fontSize: 12),
                                                    ),
                                                    Icon(
                                                      Icons
                                                          .keyboard_arrow_right,
                                                      size: 15,
                                                      color: Colors.red,
                                                    )
                                                  ],
                                                ),
                                              )
                                            ],
                                          ),
                                        ),
                                        Container(
                                          padding: const EdgeInsets.all(5),
                                          child: Row(
                                            children: <Widget>[
                                              Icon(
                                                Icons.question_answer,
                                                color: Colors.red,
                                                size: 15,
                                              ),
                                              Text(
                                                '17.3寸电脑能装吗？',
                                                style: TextStyle(fontSize: 12),
                                              )
                                            ],
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                  Divider(
                                    color: Colors.grey,
                                  ),
                                  Container(
                                    key: goodsRecommendKey,
                                    padding: const EdgeInsets.all(5),
                                    child: Column(
                                      children: <Widget>[
                                        Row(
                                          children: <Widget>[
                                            Text('店铺推荐'),
                                            Expanded(
                                              child: Container(),
                                            ),
                                            InkWell(
                                              onTap: () {
                                                Toast.show('开发中...', context,
                                                    duration:
                                                        Toast.LENGTH_LONG);
                                              },
                                              child: Row(
                                                children: <Widget>[
                                                  Text(
                                                    '查看全部',
                                                    style: TextStyle(
                                                        color: Colors.red,
                                                        fontSize: 12),
                                                  ),
                                                  Icon(
                                                    Icons.keyboard_arrow_right,
                                                    size: 15,
                                                    color: Colors.red,
                                                  )
                                                ],
                                              ),
                                            )
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            )
                          ],
                        ),
                      )
                    ]),
                  ),
                  SliverPadding(
                    padding: const EdgeInsets.only(left: 10, right: 10, top: 5),
                    sliver: SliverGrid(
                      delegate: SliverChildBuilderDelegate((context, index) {
                        return Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            ClipRRect(
                              borderRadius: BorderRadius.circular(20),
                              child: Image.network(
                                  "https://img.alicdn.com/tps/i2/O1CN01W9uxR71wGHrBlli2T_!!0-juitemmedia.jpg_540x540Q50s50.jpg_.webp"),
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                RichText(
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis,
                                  text: TextSpan(
                                      text: "时尚潮流双肩包商务休闲男士背包",
                                      style: TextStyle(
                                          color: Colors.black, fontSize: 12)),
                                ),
                                Text(
                                  '269',
                                  style: TextStyle(color: Colors.red),
                                ),
                              ],
                            ),
                          ],
                        );
                      }, childCount: 6),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          mainAxisSpacing: 30,
                          crossAxisSpacing: 30,
                          childAspectRatio: 0.6,
                          crossAxisCount: 3),
                    ),
                  ),
                  SliverToBoxAdapter(
                      child: Container(
                          key: goodsDetailKey,
                          padding: const EdgeInsets.all(5),
                          decoration: BoxDecoration(color: Colors.grey[100]),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              Line(
                                color: Colors.grey[300],
                              ),
                              Text('宝贝详情'),
                              Line(
                                color: Colors.grey[300],
                              )
                            ],
                          ))),
                  SliverToBoxAdapter(
                    child: HtmlView(
                      padding: const EdgeInsets.all(5),
                      data:
                          '''<body>Hello world! <a href="www.html5rocks.com">HTML5 rocks!
                      <img src='https://img.alicdn.com/imgextra/i3/733781907/TB2SFt7XBjkJKJjSspfXXc2tXXa_!!733781907.jpg_640x0q80_.webp'/>
                      <img src='https://img.alicdn.com/imgextra/i2/733781907/TB2b8RhyuuSBuNjy1XcXXcYjFXa_!!733781907.jpg_640x0q80_.webp'/>
                      <img src='https://img.alicdn.com/imgextra/i2/733781907/O1CN01FCOZ2C1PxRoOLiMOb_!!733781907.jpg_640x0q80_.webp'/>
                      <img src='https://img.alicdn.com/imgextra/i2/733781907/O1CN01FCOZ2C1PxRoOLiMOb_!!733781907.jpg_640x0q80_.webp'/>
                      <img src='https://img.alicdn.com/imgextra/i1/733781907/O1CN01XSmN731PxRoOL8Dyo_!!733781907.jpg_640x0q80_.webp'/>
                      ''',
                      //baseURL: "", // optional, type String
                      onLaunchFail: (url) {
                        
                        // optional, type Function
                        print("launch $url failed");
                      },
                      scrollable:
                          false, //false to use MarksownBody and true to use Marksown
                    ),
                  )
                ],
              ),
            ),
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: Container(
                  decoration: BoxDecoration(color: Colors.transparent),
                  child: Column(
                    children: <Widget>[
                      Opacity(
                        opacity: headerOpacity,
                        child: Container(
                          color: Colors.white,
                          padding: const EdgeInsets.only(
                              top: 5, left: 5, right: 5, bottom: 5),
                          child: Row(
                            children: <Widget>[
                              Expanded(
                                child: Container(),
                              ),
                              headerIcon(Icons.share),
                              headerIcon(Iconfont.cart_light, leadSpace: 5),
                              headerIcon(Icons.more_horiz, leadSpace: 5)
                            ],
                          ),
                        ),
                      ),
                      Opacity(
                          opacity: headerOpacity,
                          child: ScrollTabHeader(
                            defaultHeight:
                                70, //MediaQuery.of(context).padding.top,// 0, //MediaQuery.of(this.headKey.currentContext).size.height,
                            scrollController: scrollController,
                            defaultSelectedHeaderIndex: 0,
                            safeAreaKey: safeAreaKey,
                            headerNames: <Header>[
                              Header(
                                name: '宝贝',
                                targetKey: this.goodsDescriptionKey,
                              ),
                              Header(
                                name: '评价',
                                targetKey: this.goodsEvaluateKey,
                              ),
                              Header(
                                name: '推荐',
                                targetKey: this.goodsRecommendKey,
                              ),
                              Header(
                                name: '详情',
                                targetKey: this.goodsDetailKey,
                              )
                            ],
                            onTap: (header) {
                              print('${header.name}');
                            },
                          ))
                    ],
                  )),
            ),
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: Container(
                padding:
                    const EdgeInsets.only(top: 5, left: 5, right: 5, bottom: 5),
                child: Row(
                  children: <Widget>[
                    InkWell(
                      onTap: () {
                        Navigator.of(context).pop();
                      },
                      child: headerIcon(
                        Icons.arrow_back_ios,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Material(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20),
                    topRight: Radius.circular(20)),
                elevation: 10,
                child: Container(
                    padding: const EdgeInsets.only(
                        left: 15, right: 5, top: 3, bottom: 0),
                    height: 40,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Icon(
                              Icons.recent_actors,
                              size: 18,
                              color: Colors.red,
                            ),
                            Text(
                              '店铺',
                              style: TextStyle(fontSize: 9, color: Colors.red),
                            )
                          ],
                        ),
                        Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Icon(Icons.message, size: 18, color: Colors.grey),
                            Text(
                              '客服',
                              style: TextStyle(fontSize: 9, color: Colors.grey),
                            )
                          ],
                        ),
                        Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Icon(Icons.favorite_border,
                                size: 18, color: Colors.grey),
                            Text(
                              '收藏',
                              style: TextStyle(fontSize: 9, color: Colors.grey),
                            )
                          ],
                        ),
                        Row(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Container(
                              width: 100,
                              padding: const EdgeInsets.only(
                                  top: 9, bottom: 9, left: 20),
                              decoration: BoxDecoration(
                                color: Colors.orange,
                                borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(20),
                                    bottomLeft: Radius.circular(20)),
                                gradient: LinearGradient(
                                    colors: [Colors.orange[200], Colors.orange],
                                    begin: Alignment.centerLeft,
                                    end: Alignment.centerRight),
                              ),
                              child: Text(
                                '加入购物车',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 10),
                              ),
                            ),
                            Container(
                                width: 100,
                                padding: const EdgeInsets.all(4),
                                decoration: BoxDecoration(
                                  color: Colors.red[200],
                                  borderRadius: BorderRadius.only(
                                      topRight: Radius.circular(20),
                                      bottomRight: Radius.circular(20)),
                                  gradient: LinearGradient(
                                      colors: [
                                        Colors.deepOrangeAccent[200],
                                        Colors.deepOrange[800]
                                      ],
                                      begin: Alignment.centerLeft,
                                      end: Alignment.centerRight),
                                ),
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  mainAxisSize: MainAxisSize.min,
                                  children: <Widget>[
                                    Text(
                                      '领券购物',
                                      style: TextStyle(
                                          fontSize: 10,
                                          color: Colors.white,
                                          letterSpacing: 2),
                                    ),
                                    Text('券后¥209',
                                        style: TextStyle(
                                          color: Colors.white,
                                          fontSize: 8,
                                          letterSpacing: 2,
                                        ))
                                  ],
                                ))
                          ],
                        )
                      ],
                    )),
              ),
            )
          ]),
        ),
      ),
    );
  }
}

/*
class _SliverPersistentHeaderDelegate
    implements SliverPersistentHeaderDelegate {
  final double minHeight;
  final double maxHeight;
  final Widget child;

  _SliverPersistentHeaderDelegate(
      {@required this.minHeight,
      @required this.maxHeight,
      @required this.child});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  double get maxExtent => m.max(this.minHeight, this.maxHeight);

  @override
  double get minExtent => this.minHeight;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }

  @override
  FloatingHeaderSnapConfiguration get snapConfiguration => null;
}

*/
class WordIcon extends StatelessWidget {
  final Text text;
  final Color backgroundColor;
  final BorderRadius borderRadius;
  final Border border;
  final Color fontColor;
  final Padding padding;
  const WordIcon(
      {Key key,
      @required this.text,
      this.backgroundColor,
      this.borderRadius,
      this.border,
      this.fontColor,
      this.padding})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
            padding: padding ?? const EdgeInsets.all(2),
            decoration: BoxDecoration(
                color: this.backgroundColor ?? Colors.transparent,
                borderRadius: this.borderRadius ?? BorderRadius.circular(10),
                border: this.border),
            child: this.text)
      ],
    );
  }
}

class Line extends StatelessWidget {
  final LineDirection lineDirection;
  final Color color;
  final double width;
  final double length;
  const Line(
      {Key key,
      this.lineDirection = LineDirection.horizontal,
      this.color,
      this.width = 1,
      this.length = 30})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return this.lineDirection == LineDirection.horizontal
        ? Container(
            width: this.length,
            decoration: BoxDecoration(
                border: Border(
                    top: BorderSide(
                        color: this.color ?? Colors.grey[300],
                        width: this.width))),
          )
        : Container(
            height: this.length,
            width: 1,
            decoration: BoxDecoration(
                border: Border(
                    top: BorderSide(
                        color: this.color ?? Colors.grey[300],
                        width: this.width))),
          );
  }
}

enum LineDirection { horizontal, vertical }
